<template>
  <div id="ResumeList">
    <el-row>
      <el-col :span="22" :offset="1">
        <el-col :span="19">
          <PersonResume :id="nowResumeId" @EditResumeName="refrushResumeName"
                        @returnProgress="getProgress"></PersonResume>
        </el-col>
        <el-col :span="5">
          <el-row class="menuBar">
            <el-col :span="8">
              <div class="menu-item" @click="toOther('/personinbox/invitation')">
                <i class="fa fa-envelope-o fa-2x"></i>
                <p>邀请函</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="menu-item" @click="toOther('/personinbox/interview')">
                <i class="fa fa-twitch fa-2x"></i>
                <p>面试通知</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="menu-item" @click="toOther('/deliverhistory')">
                <i class="fa fa-archive fa-2x"></i>
                <p>投递箱</p>
              </div>
            </el-col>
          </el-row>
          <div class="process">
            <p>简历完整度:<span>{{complete_progress}}%</span></p>
            <el-progress :percentage="complete_progress" :show-text="false"></el-progress>
          </div>
          <div style="text-align:center;">
            <el-button type="primary" @click="createResume"><i class="el-icon-plus"></i>创建简历</el-button>
          </div>
          <div class="resumeCard" v-for="(item,index) in resumeList" :id="`${index}`">
            <i class="el-icon-delete2" @click="delResume(item.resume_id)"></i>
            <h4 @click="changeResume(item.resume_id)">{{item.resume_name}}</h4>
            <p>
              <span>[{{formatterDate(item)}}]</span>·<span>[{{formatterPublic(item)}}]</span>
              <i class="fa fa-cog" @click="editResumeStatus(item.resume_id)"></i>
            </p>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="修改简历状态" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">
      <el-form :model="modalData">
        <el-row :gutter="20" style="margin:1em;">
          <el-col :span="8">
            <label>是否公开</label>
          </el-col>
          <el-col :span="16">
            <el-switch v-model="whether_public" on-color="#13ce66" off-color="#ff4949">
            </el-switch>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin:1em;">
          <el-col :span="8">
            <label>默认投递</label>
          </el-col>
          <el-col :span="16">
            <el-switch v-model="is_delivery" on-color="#13ce66" off-color="#ff4949">
            </el-switch>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
		    	<el-button @click="dialogVisible=false">取 消</el-button>
		    	<el-button type="primary" @click="saveResumeInfo(modalData)">保 存</el-button>
		  	</span>
    </el-dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime, changeSalaryStyle } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import PersonResume from '@/components/myResume/PersonResume'

  export default {
    name: 'ResumeList',
    data () {
      return {
        complete_progress: 0,
        nowResumeId: '',
        resumeList: [],
        dialogVisible: false,
        modalData: {},
        whether_public: '',
        is_delivery: ''
      }
    },
    created () {
      this.nowResumeId = this.$route.params.id
      this.getResumeList()
    },
    methods: {
      getProgress (state) {
        let sum = 0
        for (let key in state) {
          sum += state[key]
        }
        this.complete_progress = sum
      },
      getResumeList () {
        let that = this
        let obj = new Object()
        postDataToServer('HM_RESUME_LISTALL', obj)
          .then(function (data) {
            if (data.data_list.length === 0) {
              that.$confirm('简历已全部删除！，是否新建简历?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.createResume()
              }).catch(() => {
                that.$router.push({path: '/'})
              })
            }
            that.convertNumToString(data.data_list)
            that.resumeList = data.data_list
            that.$router.push({'path': '/myresume/' + data.data_list[0].resume_id})
          })
      },
      convertNumToString (data) {
        for (let i = 0; i < data.length; i++) {
          for (let singleData in data[i]) {
            data[i][singleData] = getStaticMapList(singleData, data[i][singleData])
          }
        }
      },
      changeResume (id) {
        this.nowResumeId = id
        this.$router.push({path: '/myresume/' + id})
      },
      createResume () {
        let that = this
        let obj = new Object()
        let resume_id
        postDataToServer('HM_RESUME_ADD', obj)
          .then(function (data) {
            resume_id = data.data_list.resume_id
            that.nowResumeId = resume_id
            that.$router.push({'path': `/myresume/${resume_id}`})
            that.$router.go(0)
          })
      },
      delResume (id) {
        let _this = this
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('success')
          let obj = new Object()
          obj.resume_id = id
          postDataToServer('HM_RESUME_DEL', obj)
            .then(function (data) {
              if (data.status == 0) {
                _this.$message({
                  type: 'info',
                  message: '删除成功'
                })
                setTimeout(_this.getResumeList(), 300)
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      refrushResumeName (state) {
        if (state === true) {
          let that = this
          let obj = new Object()
          postDataToServer('HM_RESUME_LISTALL', obj)
            .then(function (data) {
              that.convertNumToString(data.data_list)
              that.resumeList = data.data_list
            })
        }
      },
      formatterDate (row) {
        return formatterTime('yyyy-MM-dd', row.update_time)
      },
      formatterPublic (row) {
        if (row.whether_public === '是') {
          return '已公开'
        } else {
          return '未公开'
        }
      },
      toOther (path) {
        this.$router.push({path: path})
      },
      editResumeStatus (id) {
        this.dialogVisible = true
        for (let i = 0; i < this.resumeList.length; i++) {
          if (this.resumeList[i].resume_id == id) {
            this.modalData = this.resumeList[i]
            this.modalData.is_delivery == '否' ? this.is_delivery = false : this.is_delivery = true
            this.modalData.whether_public == '否' ? this.whether_public = false : this.whether_public = true
          }
        }
      },
      handleClose (done) {
        this.dialogVisible = false
      },
      saveResumeInfo (data) {
        this.dialogVisible = false
        let obj = {}
        obj.resume_id = data.resume_id
        this.is_delivery == true ? obj.is_delivery = 0 : obj.is_delivery = 1
        this.whether_public == true ? obj.whether_public = 0 : obj.whether_public = 1
        postDataToServer('HM_RESUME_EDIT', obj)
          .then(function (data) {
          })
        setTimeout(this.getResumeList, 300)
      }
    },
    components: {
      PersonResume
    }
  }
</script>

<style scoped>
  #ResumeList {
    padding-top: 2em;
  }

  /*右侧跳转按钮样式*/
  .menuBar {
    margin-top: 2em;
  }

  .menu-item {
    background: #FAFAFA;
    border: 1px solid #F2F2F2;
    padding: 10px 5px;
    margin: 5px;
    text-align: center;
    color: #999;
    font-size: 15px;
  }

  .menu-item:hover {
    color: #20A0FF;
    background: #fff;
    border: 1px solid #e8e8e8;
  }

  /*简历完整度样式*/
  .process {
    margin: 2em 0em 3em;
    background: #FAFAFA;
    border: 1px solid #e8e8e8;
    padding: 1em 0.5em;
  }

  .process p {
    margin-bottom: 1em;
    color: #666;
  }

  .process span {
    color: #20A0FF;
    margin: 0px 20px;
  }

  /*右侧简历卡片样式*/
  .resumeCard {
    border: 1px solid #e8e8e8;
    border-left: 3px solid #20A0FF;
    text-align: center;
    margin: 2em 0em;
    padding: 1em 0.3em 1em 0.1em;
    background: #FAFAFA;
  }

  .choosedResume i,
  .resumeCard i {
    float: right;
    color: #999;
    cursor: pointer;
  }

  .choosedResume i:hover,
  .resumeCard i:hover {
    color: red;
  }

  .resumeCard p > i:hover {
    color: #20A0FF;
  }

  .resumeCard h4 {
    margin: 0px 5px 8px;
    color: #333333;
    cursor: pointer;
  }

  .resumeCard h4:hover {
    color: #20A0FF;
  }

  .resumeCard span {
    color: #666;
    margin: 2px 5px;
  }

  .choosedResume {
    border-left: 2px solid #20A0FF;
    border: 1px solid #e8e8e8;
    text-align: center;
    margin: 2em auto;
    padding: 0.8em 0.4em;
    color: #20A0FF;
    background: #FFF;
  }

  .choosedResume h4 {
    margin: 0px 5px 8px;
    color: #20A0FF;
  }

  .choosedResume span {
    color: #20A0FF;
    margin: 2px 5px;
  }
</style>
